<template>
	<view class="dark-container">
		<!-- 页面标题 -->
		<!-- 	<view class="page-header">
			<text class="page-title">学生作业列表</text>
		</view> -->

		<!-- 作业列表 -->
		<view class="homework-list">
			<template v-if="homeworkList.length > 0">


				<view class="homework-card" v-for="(item, index) in homeworkList" :key="index"
					@click="viewDetail(item.id, coach_id, item.goods.id)">
					<!-- 第一行：学生姓名和状态 -->
					<view class="card-row name-row">
						<text class="student-name">{{ item.user.nickname }}</text>
						<text class="status-tag"
							:class="{'pending': item.goods.result_status === 3, 'completed': item.goods.result_status === 4}">
							{{ item.goods.result_status == 3 ? '待评语' :  item.goods.result_status == 4 ? '已评语' : '学生未上传作业' }}
						</text>
					</view>

					<!-- 第二行：科目 -->
					<view class="card-row">
						<view class="subject">机构：{{item.shop.shop_name}} 科目：{{ item.pay_body }}</view>

					</view>
					<view class="card-row">
						<view class="subject">上课时间：{{item.goods.course_camp.class_time_txt}}
							{{item.goods.course_camp.start_at}}-{{item.goods.course_camp.end_at}}</view>
					</view>
					<!-- 第三行：时间和操作 -->
					<view class="card-row time-row">
						<text class="time">付款时间：{{ item.pay_time }}</text>
						<text class="view-detail">查看详情 ></text>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="empty">暂无学生上传作业</view>
			</template>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				homeworkList: [

				],
				coach_id: ''
			}
		},
		methods: {
			viewDetail(id, coach_id, goods_id) {
				console.log(goods_id)
				uni.navigateTo({
					url: `../students_job_details/students_job_details?id=${id}&coach_id=${coach_id}&goods_id=${goods_id}`
				});
			}
		},
		onLoad(options) {
			this.coach_id = options.id
			this.$http({
				url: '/addons/xilufitness/coach/getOrderList',
				data: {
					coach_id: options.id
				},
				method: 'get'
			}).then(res => {
				this.homeworkList = res.data.list
				console.log(res);
			})
		}
	}
</script>
<style scoped>
	input,
	textarea {
		background-color: #fff;
		color: #333;
		border: 1px solid #E8EEFE;
		border-radius: 12rpx;
		width: 92%;
		padding: 24rpx;
		font-size: 28rpx;
		box-sizing: content-box;
		transition: 0.2s;
	}
	
	input:focus,
	textarea:focus {
		border-color: #FFCF00;
		box-shadow: 0 0 10rpx rgba(255, 207, 0, 0.5);
		outline: none;
	}
	
	textarea {
		min-height: 120rpx;
		line-height: 1.5;
		resize: none;
	}
	.empty {
		text-align: center;
		padding: 200rpx 0;
		color: #666;
		font-size: 28rpx;
	}

	.dark-container {
		min-height: 100vh;
		background: #E8EEFE;
		padding: 30rpx 25rpx;
		box-sizing: border-box;
	}

	.page-header {
		margin-bottom: 30rpx;
	}

	.page-title {
		font-size: 38rpx;
		font-weight: 600;
		color: #E0E0E0;
		letter-spacing: 1rpx;
	}

	.homework-list {
		display: flex;
		flex-direction: column;
		gap: 25rpx;
	}

	.homework-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	}

	.card-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;
	}

	.name-row {
		margin-bottom: 22rpx;
	}

	.time-row {
		margin-bottom: 0;
		padding-top: 15rpx;
		border-top: 1rpx solid #2D2D2D;
	}

	.student-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.subject {
		font-size: 28rpx;
		color: #333;
	}

	.time {
		font-size: 26rpx;
		color: #333;
	}

	.view-detail {
		font-size: 26rpx;
		color: #FFD700;
	}

	.status-tag {
		font-size: 24rpx;
		padding: 6rpx 18rpx;
		border-radius: 20rpx;
		font-weight: 500;
	}

	.status-tag.pending {
		background-color: rgba(255, 152, 0, 0.15);
		color: #FF9800;
	}

	.status-tag.completed {
		background-color: rgba(76, 175, 80, 0.15);
		color: #4CAF50;
	}
</style>